import React from 'react'
import PropTypes from 'prop-types'
import { Text, StyleSheet } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import CustomBoxShadow from 'src/components/boxshadow/CustomBoxShadow'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'

export default function MemberTypeBtn (props) {
  return (
    <CustomBoxShadow style={{ ...styles.vipTypeBtn, ...props.style }}>
      <LinearGradient
        {...props.linearProps}
        style={styles.vipTypeLinear}
      >
        <Text style={styles.vipTypeTxt1}>{props.nameZh}</Text>
        <Text style={styles.vipTypeTxt2}>{props.nameEn}</Text>
      </LinearGradient>
    </CustomBoxShadow>
  )
}
MemberTypeBtn.propTypes = {
  style: PropTypes.object,
  linearProps: PropTypes.object,
  nameZh: PropTypes.string,
  nameEn: PropTypes.string
}
const styles = StyleSheet.create({
  vipTypeBtn: {
    width: ScaleS(100),
    height: ScaleS(35),
    shadowRadius: ScaleS(6),
    shadowOpacity: 0.5,
    shadowColor: '#767676',
    shadowOffset: {
      width: 0,
      height: 2
    }
  },
  vipTypeLinear: {
    // flex: 1,
    height: ScaleS(35),
    borderRadius: ScaleS(3),
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    transform: [{ skewX: '-15deg' }]
  },

  vipTypeTxt1: {
    fontSize: ScaleT(14),
    fontWeight: '600',
    color: '#ffffff',
    transform: [{ skewX: '15deg' }]
  },
  vipTypeTxt2: {
    fontSize: ScaleT(15),
    fontWeight: '600',
    color: '#FCF4C4',
    transform: [{ skewX: '15deg' }]
  }
})
